<html>
	<head>
		<title>performance test by qq.d.y</title>
		<script src="util.js"></script>
		<script>
			var gl, W, H, g2d;
			var RENDER_LINES = 0, RENDER_RECTS = 1, RENDER_CIRCLES = 2, RENDER_ZBUFFER = 3, RENDER_FONT = 4;
			var tp = RENDER_FONT;
			var NUM = [512, 1024, 2048, 4096, 8192];
			var shape_num = 2;
			var frame_cnt = 0, last_tick = 0;
			function init() {
				W = document.getElementById('canvas').width;
				H = document.getElementById('canvas').height;
				gl = document.getElementById('canvas').getContext('experimental-webgl');
				if (!gl)   alert('please do not use fuck IE...');
				gl.clearColor(0,0,0,1);
				
				g2d = new G2D(gl, W, H);
				g2d.font_create('font.bmp');
				last_tick = new Date().getTime();
				setInterval('render();',30);
			}
			function rand(min, max) {
				return Math.random() * (max - min) + min;
			}
			function render() {					
				g2d.begin();
				
				// draw line
				var n = NUM[shape_num];
				if (tp == RENDER_LINES) {
					for (var i=0; i<n; i++)   g2d.line(rand(0,W), rand(0,H), rand(0,W), rand(0,H), [Math.random(), Math.random(), Math.random()], 0);
				}
				// draw quad
				if (tp == RENDER_RECTS) {
					for (var i=0; i<n; i++)   g2d.rect(rand(0,W), rand(0,H), rand(0,W/2), rand(0,H/2), [Math.random(), Math.random(), Math.random()], 0);
				}
				// draw circle
				if (tp == RENDER_CIRCLES) {
					for (var i=0; i<n; i++)   g2d.circle(rand(0,W), rand(0,H), rand(0,128), [Math.random(), Math.random(), Math.random()], 0);
				}
				// z-buffer
				if (tp == RENDER_ZBUFFER) {
					for (var i=0; i<8; i++)   g2d.circle(50, 50+i*50, 30, [0,0,1], 0.2);
					for (var i=0; i<8; i++)   g2d.rect(10, 10+i*35, 30, 30, [1,0,0], 0.5);
					for (var i=0; i<64; i++)   g2d.line(10, 10+i*5, W-10, 10+i*5, [0,1,0], 0.4);
				}
				// draw font
				if (tp == RENDER_FONT) {
					g2d.circle(W/2, H/2, 128, [0.2,0.2,0.2], 0.1);
					for (var i=0; i<23; i++)   g2d.font_draw('abcdefghigklmnopqrstuvwxyz 0123456789 ABCDEFGHIGKLMNOPQRSTUVWXYZ .:,()-', 0, 10+i*20);
				}
				
				g2d.end();
				
				// FPS
				++frame_cnt;
				if (new Date().getTime() - last_tick >= 1000) {
					document.getElementById('btp').value = frame_cnt;
					frame_cnt = 0;
					last_tick = new Date().getTime();
				}
				document.getElementById('sn').value = n;
			}
			document.onkeydown = function(e) {
				k = String.fromCharCode(e.which);
				if (k == '1')        tp = RENDER_LINES;
				else if (k == '2')   tp = RENDER_RECTS;
				else if (k == '3')   tp = RENDER_CIRCLES;
				else if (k == '4')   tp = RENDER_ZBUFFER;
				else if (k == '5')   tp = RENDER_FONT;
				
				if (k == '&')        ++shape_num;
				else if (k == '(')   --shape_num;
				if (shape_num < 0)   shape_num = 0;
				if (shape_num > 4)   shape_num = 4;
			}
		</script>
	</head>
	<body onload='init()'>
		<canvas id="canvas" style="border:none;" width='640' height='480'></canvas>
		<br><br/>
		<tr>
			<td>FPS: <input type='text' id='btp' value='0' readonly/>
			<td>shape number : <input type='text' id='sn' value='0' readonly/>
		</tr>
	</body>
</html>